<template>
  <div id="publisher-list">
    <c-title text="随叫随到"></c-title>
    <search-box v-if="type == '1' || type == '2'"></search-box>
    <form @submit.prevent action="#" style="width: 100%;" v-if="type == '3'">
      <van-search v-model="name" placeholder="企业" shape="round" @search="inputValue" @clear="inputValue" type="search"/>
    </form>
    <van-tabs v-model="activeName" title-active-color="#4978F8" color="#4978F8" @change="changeTab">
      <!-- 个人需求 -->
      <van-tab :title="item.title" :name="item.id" v-for="(item,index) in classifyData" :key="index">
        <div class="type-row"  v-if="type == '1' || type == '2'">
          <span :class="order_by == 'new' ? 'type-name active-name' : 'type-name'" @click="clickTypeOp('new')">最新</span>
          <span :class="order_by == 'near' ? 'type-name active-name' : 'type-name'" @click="clickTypeOp('near')">附近</span>
        </div>
        <d-list :loading="loading" :finished="finished" @load="onLoad" >
          <div class="demand-detail-pane" v-if="type == '1'">
            <div class="row-box" v-for="(item,index) in dataList" :key="index" @click="goividualNeeds(1,item)">
              <img :src="item.thumb_url" alt="" />
              <div class="left-rol">
                <div class="top-name">{{item.title}}</div>
                <div class="introduction">{{item.content}}</div>
                <span class="service-time">服务时间：{{item.start_at}}-{{item.finish_at.split(' ')[1]}}</span>
                <div class="bottom-trp">
                  <div class="price-sty"><span class="price-symbol">￥</span>{{item.service_fee}}</div>
                  <div class="location-sty"><img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/anytime_service/icon_local (1).png" alt="" class="img-icon">{{item.distance}}{{item.unit}}</div>
                </div>
              </div>
            </div>
          </div>
          <!-- 技师师傅 -->
          <div class="technician-detail-pane" v-if="type == '2'">
            <div class="row-box" v-for="(item,index) in dataList" :key="index" @click="goTechnicianHome(item.id)">
              <img :src="item.personal_pic" alt="" />
              <div class="left-rol">
                <!-- 是否培训：1培训、0未培训 -->
                <div class="top-name">{{ item.realname }}<span class="training-sty">{{ item.other1 == '1' ? '已培训' : '未培训'}}</span></div>
                <div class="intro-detail">
                  <span class="space-line">{{item.detail_info.sex}}</span>
                  <span class="space-line">{{item.detail_info.age}}岁</span>
                  <span class="space-line">{{item.detail_info.native_place}}</span>
                </div>
                <div class="introduction">{{item.detail_info.introduce}}</div>
                <div class="bottom-trp">
                  <div class="star-pane">
                    <van-icon name="star" class="star-sty" v-for="(citem,cindex) in item.star_grade" :key="cindex"/>
                  </div>
                  <div class="location-sty"><img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/anytime_service/icon_local (1).png" alt="" class="img-icon">{{item.distance}}{{item.unit}}</div>
                </div>
              </div>
            </div>
          </div>
          <!-- 企业 -->
          <div class="enterprise-detail-pane" v-if="type == '3'">
            <div class="row-box" @click="goividualNeeds(3,item)" v-for="(item,index) in dataList" :key="index">
              <img :src="item.has_one_category.thumb_url" alt="" />
              <div class="left-rol">
                <div class="top-name">{{item.title}}</div>
                <div class="introduction">{{item.content}}</div>
                <div class="enterprise-name">{{item.has_one_enterprise.realname	}}</div>
              </div>
            </div>
          </div>
        </d-list>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
import publisher_list_controller from "./publisher_list_controller";

export default publisher_list_controller;
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
#search-box-cpn {
  .search_box {
    .search {
      height: 2.75rem;
      line-height: 2.75rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 0.875rem;
      background-color: #fff;
      font-size: 0.6rem;

      .left {
        display: flex;

        .icon-local-img {
          width: 0.85rem;
          height: 0.85rem;
        }

        i {
          color: #333;
        }

        span {
          display: block;
          margin: 0 0.25rem;
          max-width: 5.75rem;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          color: #333;
        }

        i:last-child {
        }
      }

      .right {
        width: 14.375rem;
        height: 1.875rem;
        background: #f5f5f5;
        display: flex;
        line-height: 1.875rem;
        border-radius: 1rem;
        padding: 0 0.625rem;
        font-size: 0.35rem;

        i {
          color: #999;
          margin-right: 0.375rem;
        }

        input {
          border: none;
          width: 100%;
        }
      }
    }
  }
}

#publisher-list {
  .type-row {
    display: flex;

    .type-name {
      margin: 0.6rem 0.6rem;
      font-size: 0.8rem;
      font-weight: 400;
      color: #999;
      margin-right: 1rem;
      line-height: 1;
      cursor: pointer;
      padding: 0.4rem 0.8rem;
    }

    .active-name {
      border-radius: 0.82rem 0.82rem 0.82rem 0.82rem;
      border: 0.03rem solid #4978f8;
      color: #4978f8;
      background: white;
    }
  }

  .demand-detail-pane {
    .row-box {
      background: white;
      display: flex;
      padding: 0.6rem;

      img {
        width: 6.45rem;
        height: 6.45rem;
        border-radius: 0.2rem 0.2rem 0.2rem 0.2rem;
        margin: 0;
      }

      .left-rol {
        width: calc(100% - 6.45rem);
        margin-left: 0.5rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .top-name {
          text-align: left;
          font-size: 0.85rem;
          font-weight: 600;
          color: #333;
          display: flex;
          align-items: center;
        }

        .introduction {
          text-align: left;
          font-size: 0.8rem;
          font-weight: 400;
          color: #999;
          overflow: hidden; //超出的文本隐藏
          display: -webkit-box;
          -webkit-line-clamp: 1; // 超出多少行
          -webkit-box-orient: vertical;
        }

        .service-time {
          font-size: 0.75rem;
          font-weight: 400;
          color: #ff9c43;
          background: #ffeedf;
          border-radius: 0.1rem 0.1rem 0.1rem 0.1rem;
          padding: 0.2rem 0.3rem;
          width: fit-content;
          text-align: left;
        }

        .bottom-trp {
          display: flex;
          justify-content: space-between;
          align-items: center;

          .price-sty {
            font-size: 0.85rem;
            font-weight: 500;
            color: #ff9c43;

            .price-symbol {
              font-size: 0.65rem;
            }
          }

          .location-sty {
            font-size: 0.7rem;
            font-weight: 400;
            color: #999;
            display: flex;
            align-items: center;

            img {
              margin-right: 0.2rem;
            }
          }
        }
      }
    }
  }

  .technician-detail-pane {
    .row-box {
      background: white;
      display: flex;
      padding: 0.6rem;

      img {
        width: 6.45rem;
        height: 6.45rem;
        border-radius: 0.2rem 0.2rem 0.2rem 0.2rem;
        margin: 0;
      }

      .left-rol {
        width: 100%;
        margin-left: 0.5rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .top-name {
          text-align: left;
          font-size: 0.85rem;
          font-weight: 600;
          color: #333;

          .training-sty {
            padding: 0.125rem 0.2rem;
            font-size: 0.55rem;
            font-weight: 400;
            border-radius: 0.1rem 0.1rem 0.1rem 0.1rem;
            border: 0.025rem solid #ff9c43;
            color: #ff9c43;
            // line-height: 1;
            margin-left: 0.4rem;
          }
        }

        .intro-detail {
          text-align: left;

          .space-line {
            font-size: 0.75rem;
            font-weight: 400;
            color: #999;
            margin-right: 0.6rem;
          }
        }

        .introduction {
          text-align: left;
          font-size: 0.75rem;
          font-weight: 400;
          color: #999;
          overflow: hidden; //超出的文本隐藏
          display: -webkit-box;
          -webkit-line-clamp: 1; // 超出多少行
          -webkit-box-orient: vertical;
        }

        .bottom-trp {
          display: flex;
          justify-content: space-between;
          align-items: center;

          .star-pane {
            display: flex;

            .star-sty {
              width: 0.85rem;
              height: 0.85rem;
              color: #ff9c43;
              margin-right: 0.2rem;
            }
          }

          .price-sty {
            font-size: 0.9rem;
            font-weight: 500;
            color: #ff9c43;

            .price-symbol {
              font-size: 0.7rem;
            }
          }

          .location-sty {
            font-size: 0.7rem;
            font-weight: 400;
            color: #999;
            display: flex;
            align-items: center;
          }
        }
      }
    }
  }

  .enterprise-detail-pane {
    .row-box {
      background: white;
      display: flex;
      padding: 0.6rem;
      margin-top: 0.6rem;

      img {
        width: 5.45rem;
        height: 5.45rem;
        border-radius: 0.2rem 0.2rem 0.2rem 0.2rem;
        margin: 0;
      }

      .left-rol {
        width: 100%;
        margin-left: 0.5rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .top-name {
          text-align: left;
          font-size: 0.85rem;
          font-weight: 600;
          color: #333;
          overflow: hidden; //超出的文本隐藏
          display: -webkit-box;
          -webkit-line-clamp: 1; // 超出多少行
          -webkit-box-orient: vertical;
        }

        .introduction {
          text-align: left;
          font-size: 0.75rem;
          font-weight: 400;
          color: #999;
          overflow: hidden; //超出的文本隐藏
          display: -webkit-box;
          -webkit-line-clamp: 1; // 超出多少行
          -webkit-box-orient: vertical;
        }

        .enterprise-name {
          font-size: 0.7rem;
          font-weight: 400;
          color: #4978f8;
          text-align: left;
          overflow: hidden; //超出的文本隐藏
          display: -webkit-box;
          -webkit-line-clamp: 1; // 超出多少行
          -webkit-box-orient: vertical;
          margin-top: 0.8rem;
        }
      }
    }
  }

  .img-icon {
    width: 0.85rem !important;
    height: 0.85rem !important;
  }
}
</style>
